<template>
    <a-date-picker :size="option.size" v-model:value="InputValue" :placeholder="option.placeholder" style=" width:100%"
        :format="option.dateFormat || 'YYYY-MM-DD'" :disabled="readonly" :allowClear="option.allowClear" />
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';
import dayjs from 'dayjs';

const emit = defineEmits(['UpdateEvent', 'SetError']);

const props = defineProps({
    option: Object,
    Value: {},
});

const readonly = ref(false);
const InputValue = ref();

watchEffect(() => {
    readonly.value = !!props.option.readonly
})

watch(() => props.Value[props.option.key], val => {
    InputValue.value = !!props.Value[props.option.key] ? dayjs(val) : dayjs()
}, { immediate: true });


watch(InputValue, (val) => {
    emit('UpdateEvent', props.option.key, val.format(props.option.dateFormat || 'YYYY-MM-DD'));
}, { immediate: true, deep: true })

</script>
<style lang="less" scoped></style>